<template>
	<view class="page-content">
		<view class="nav-tabbar flex flex-middle">
			<view class="flex-item" v-for="(item, index) in tabbar" :key="index" :class="index == tabIndex ? 'active' : ''" @click="tabChange(index)">{{ item }}</view>
		</view>
		<swiper class="swiper-box" style="flex: 1;height: calc(100vh - 180upx);" :current="tabIndex" :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item flex">
				<scroll-view scroll-view class="scroll-v list" enableBackToTop="true" scroll-y>
					<view class="wrap canvas-wrap">
						<!-- <view class="top-tips flex flex-row flex-middle flex-center"> -->
						<!-- <text>呼和浩特和林新区</text> -->
						<picker @change="bindPickerChange" :value="dateTimeIndex" :range="OBJTime">
							<view class="top-tips flex flex-row flex-middle flex-center">
								<!-- <text v-if="dateOne != null">{{ dateOne.region }}</text> -->
								<text>监测时间</text>
								<text v-if="OBJTime != null">{{ OBJTime[dateTimeIndex] }}</text>
								<text class="iconfont">&#xe646;</text>
							</view>
						</picker>
						<!-- </view> -->
						<view class="canvas-box">
							<l-echart canvas-id="canvasAqi" id="canvasAqi" ref="canvasAqi"></l-echart>
							<!-- <circle-progress-bar :progress="aqi"></circle-progress-bar> -->
						</view>
						<view class="canvasBoxWar">
							<veiw v-if="weather != null" class="box">
								<view class="left">
									<image class="image" src="@/static/monitor/tips02.png" mode="aspectFill"></image>
									本月-空气指数：
								</view>
								<view class="right">
									<view class="itemWar" v-for="(item, index) in weather" :key="index">
										<view class="item" v-if="item.day > 0">
											{{ item.name }}
											<veiw class="day">{{ item.day }}</veiw>
											天{{ weather.length - 1 > index ? '、' : '' }}
										</view>
									</view>
								</view>
							</veiw>
							<veiw v-if="sywrw != null" class="box">
								<view class="left">
									<image class="image" src="@/static/monitor/tips01.png" mode="aspectFill"></image>
									主要污染物：
								</view>
								<view class="right">
									<view class="item" v-for="(item, index) in sywrw" :key="index">{{ canvasTypeName[item] }}{{ sywrw.length - 1 > index ? '、' : '' }}</view>
								</view>
							</veiw>
							<veiw v-if="aqi != null" class="box">
								<view class="left">
									<image class="image" src="@/static/monitor/tips03.png" mode="aspectFill"></image>
									AQI指数：
								</view>
								<view class="right">
									<view class="item">{{ aqi }}</view>
								</view>
							</veiw>
						</view>
					</view>
					<view v-if="dateOne != null && OBJTime" class="wrap pollution-wrap">
						<titles title="污染物" align="center" titleType="list-title" onlyTitle class="wrap-title"></titles>
						<view class="content flex flex-wrap">
							<view class="pollution-item flex flex-row color1">
								<image src="@/static/monitor/tips.png" mode="widthFix" @click="goto('PM25')"></image>
								<view class="flex-item">
									<view class="title">
										<text>PM2.5</text>
										<!-- <text>空气动力学直径≤2.5um的颗粒物</text> -->
									</view>
									<view class="valueWar">
										<view class="value">{{ dateOne.PM25 }}</view>
										<text class="unit">μg/m³</text>
									</view>
								</view>
							</view>
							<view class="pollution-item flex flex-row color2">
								<image src="@/static/monitor/tips.png" mode="widthFix" @click="goto('PM10')"></image>
								<view class="flex-item">
									<view class="title">
										<text>PM10</text>
										<!-- <text>空气动力学直径≤10um的颗粒物</text> -->
									</view>
									<view class="valueWar">
										<view class="value">{{ dateOne.PM10 }}</view>
										<text class="unit">μg/m³</text>
									</view>
								</view>
							</view>
							<view class="pollution-item flex flex-row color3">
								<image src="@/static/monitor/tips.png" mode="widthFix" @click="goto('O3')"></image>
								<view class="flex-item">
									<view class="title">
										<!-- <text>O3</text> -->
										<text>臭氧浓度</text>
									</view>
									<view class="valueWar">
										<view class="value">{{ dateOne.O3_8h }}</view>
										<text class="unit">μg/m³</text>
									</view>
								</view>
							</view>
							<view class="pollution-item flex flex-row color4">
								<image src="@/static/monitor/tips.png" mode="widthFix" @click="goto('NO2')"></image>
								<view class="flex-item">
									<view class="title"><text>二氧化氮</text></view>
									<view class="valueWar">
										<view class="value">{{ dateOne.NO2 }}</view>
										<text class="unit">μg/m³</text>
									</view>
									<!-- <view class="title">
										<text>二氧化氮</text>
										<text class="unit">μg/m³</text>
									</view>
									<view class="value">{{ dateOne.NO2 }}</view> -->
								</view>
							</view>
							<view class="pollution-item flex flex-row color5">
								<image src="@/static/monitor/tips.png" mode="widthFix" @click="goto('SO2')"></image>
								<view class="flex-item">
									<view class="title"><text>二氧化硫</text></view>
									<view class="valueWar">
										<view class="value">{{ dateOne.SO2 }}</view>
										<text class="unit">μg/m³</text>
									</view>
								</view>
							</view>
							<view class="pollution-item flex flex-row color6">
								<image src="@/static/monitor/tips.png" mode="widthFix" @click="goto('CO')"></image>
								<view class="flex-item">
									<view class="title">
										<!-- <text>CO</text> -->
										<text>一氧化碳</text>
									</view>
									<view class="valueWar">
										<view class="value">{{ dateOne.CO }}</view>
										<text class="unit">μg/m³</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="OBJTime" class="wrap charts-wrap">
						<tle title="历史数据" :dynamicString="OBJTime[dateTimeIndex]" align="center" titleType="list-title" onlyTitle class="wrap-title b-b"></tle>
						<view class="content">
							<scroll-bar :tab="canvasType" @change="canvasBarChange"></scroll-bar>
							<!-- <view class="show-charts-tip">
								<view class="date">
									<text>{{ canvasItem.categories }}</text>
								</view>
								<view class="content flex flex-row">
									<view class="flex-item address">
										{{ canvasType[canvasIndex] }}
										<text>和林新区</text>
									</view>
									<view class="flex-item value">
										<text>优</text>
										{{ canvasItem.value }}
									</view>
								</view>
							</view> -->
							<view class="charts-box">
								<canvas canvas-id="canvasColumnA" id="canvasColumnA" class="charts" @touchstart="touchColumn($event, 'canvasColumnA')"></canvas>
							</view>
						</view>
					</view>
					<view v-if="OBJDate != null" class="wrap" style="padding: 20upx 0;">
						<view class="card-item flex flex-row flex-middle">
							<view class="flex-item">
								<view class="title">
									<image src="@/static/monitor/kqzl.png" mode="widthFix"></image>
									域内空气质量达标率
								</view>
								<!-- <view class="tips">监测数据来自环保局监测站</view> -->
							</view>
							<view class="num flex" style="color: #A8E160;">
								<count-to :start="0" :end="parseInt(OBJDate.you)" />
								%
							</view>
						</view>
						<view class="card-item flex flex-row flex-middle">
							<view class="flex-item ">
								<view class="title">
									<image src="@/static/monitor/tqdbl.png" mode="widthFix"></image>
									良好天气达标率
								</view>
								<!-- <view class="tips">监测数据来自环保局监测站</view> -->
							</view>
							<view class="num flex" style="color: #FDD64D">
								<count-to :start="0" :end="parseInt(OBJDate.liang)" />
								%
							</view>
						</view>
						<view class="card-item flex flex-row flex-middle">
							<view class="flex-item ">
								<view class="title">
									<image src="../../static/monitor/zyjc.png" mode="widthFix"></image>
									噪音监测
								</view>
								<!-- <view class="tips">监测数据来自环保局监测站</view> -->
							</view>
							<view class="num flex" style="color: #FF9B57">
								<count-to :start="0" :end="parseInt(OBJDate.fenbei)" />
								分贝
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item flex">
				<scroll-view scroll-view class="scroll-v list" style="background-color: #F5F5F5;" enableBackToTop="true" scroll-y><ecologicalIndex></ecologicalIndex></scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts';
import titles from '@/components/title/titles.vue';
import tle from '@/components/tle.vue';
import scrollBar from '@/components/scroll-bar/scroll-bar.vue';
import circleProgressBar from '@/components/circle-progress-bar/circle-progress-bar.vue';
import uCharts from '@/components/u-charts/u-charts.js';
import countTo from '@/components/count-to/count-to.vue';
import ecologicalIndex from './components/ecologicalIndex.vue';
var _self,
	canvasObj = {};
export default {
	components: {
		titles,
		tle,
		scrollBar,
		circleProgressBar,
		countTo,
		ecologicalIndex
	},
	data() {
		return {
			OBJDate: null,
			OBJTime: null,
			dateTimeIndex: 0,
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			tabbar: ['环境指数', '生态指数'],
			tabIndex: 0,
			categories: ['01', '02'],
			canvasType: ['AQI', 'PM2.5', 'PM10', '臭氧浓度', '二氧化硫', '一氧化碳'],
			canvasTypeName: {
				NO2: '二氧化氮',
				PM25: 'PM2.5',
				'PM2.5': 'PM2.5',
				SO2: '二氧化硫',
				aqi: 'aqi',
				AQI: 'AQI',
				PM10: 'PM10',
				O3_8h: '臭氧浓度',
				CO: '一氧化碳'
			},
			canvasList: [],
			canvasIndex: 0,
			canvasItem: '',
			// 土壤监测数据
			soilType: ['氮', '磷', '钾', 'PH值', '电导率', '温湿度'],
			soilIndex: 0,
			soilItem: '',
			// 水质监测数据
			waterType: ['PH值', '浊度', '电导率', '溶解氧', '水质氨氮'],
			waterIndex: 0,
			waterItem: '',
			vegetationItem: '',
			animalItem: '',
			microbeItem: '',
			monitor: [],
			isRefresh: false,
			defaultCategories: ['01', '02']
		};
	},
	watch: {
		OBJDate: function(value) {
			if (value != null) {
				let list = [];
				let num = [];
				for (var i = 0; i < this.OBJDate.kqzlzslbData.length; i++) {
					list.splice(i, 0, {
						name: this.OBJDate.kqzlzslbData[i].Kqzlzslb,
						max: this.OBJDate.NumDay
					});
					num.splice(i, 0, this.OBJDate.kqzlzslbData[i].days);
				}
				let c1 = {
					color: ['#a8e160'],
					radar: {
						// shape: 'circle',
						radius: '75%',
						indicator: list
					},
					series: [
						{
							name: '天气情况',
							type: 'radar',
							data: [
								{
									value: num,
									name: '',
									areaStyle: {
										color: 'rgba(168,225,96, 0.6)'
									}
								}
							]
						}
					]
				};
				this.$refs.canvasAqi.init(config => {
					const { canvas } = config;
					const chart = echarts.init(canvas, null, config);
					chart.setOption(c1);
					return chart;
				});
			}
		}
	},
	computed: {
		aqi: function({ dateOne }) {
			if (dateOne != null) {
				let iq = parseInt(dateOne.aqi);
				if (iq >= 0 && iq < 51) {
					return 'I  级';
				} else if (iq >= 51 && iq < 101) {
					return 'II  级';
				} else if (iq >= 101 && iq < 151) {
					return 'III  级';
				} else if (iq >= 151 && iq < 201) {
					return 'IV  级';
				} else if (iq >= 201 && iq <= 300) {
					return 'V  级';
				} else if (iq > 300) {
					return 'VI  级';
				}
			} else {
				return null;
			}
		},
		weather: function({ OBJDate }) {
			let list = null;
			if (OBJDate != null) {
				list = [];
				for (var i = 0; i < OBJDate.kqzlzslbData.length; i++) {
					list.splice(i, 0, {
						name: OBJDate.kqzlzslbData[i].Kqzlzslb,
						day: OBJDate.kqzlzslbData[i].days
					});
				}
			}
			return list;
		},
		sywrw: function({ OBJDate }) {
			let list = null;
			if (OBJDate != null) {
				list = [];
				for (var i = 0; i < OBJDate.sywrw.length; i++) {
					list.splice(i, 0, OBJDate.sywrw[i]);
				}
			}
			return list;
		},
		dateOne: function({ OBJDate }) {
			if (OBJDate != null) {
				return OBJDate.data[0];
			} else {
				return null;
			}
		}
	},
	onReady() {
		_self = this;
		this.cWidth = uni.upx2px(690);
		this.cHeight = uni.upx2px(264);
	},
	onLoad() {},
	onShow() {
		this.getWeatherYearAndMonth();
	},
	onPullDownRefresh() {
		this.isRefresh = true;
		this.getInfo();
	},
	methods: {
		/**
		 * getWeatherYearAndMonth 获取年月
		 * */
		getWeatherYearAndMonth() {
			let upDate = {
				url: `${this.config.getWeatherYearAndMonth}`,
				method: 'GET'
			};
			this.$$.request(upDate, true, true).then(res => {
				console.log(res.data.data);
				this.OBJTime = [];
				let time = res.data.data.sort(function(a, b) {
					return a.localeCompare(b, 'zh-CN');
				});
				if (res.code) {
					for (var i = 0; i < time.length; i++) {
						this.OBJTime.splice(i, 0, time[i]);
					}
					this.dateTimeIndex = this.OBJTime.length - 1;
					this.getWeatherMess(this.OBJTime[this.dateTimeIndex]);
				}
			});
		},
		/**
		 * 获取详情
		 * */
		getWeatherMess(datas) {
			datas = datas.split('-');
			let year = datas[0];
			let month = datas[1];
			let upDate = {
				url: `${this.config.getWeatherMess}?year=${year}&month=${month}`,
				method: 'GET'
			};
			this.$$.request(upDate, true, true).then(res => {
				console.log(res.data);
				this.OBJDate = res.data;
				this.canvasType = [];
				this.canvasList = [];
				let canvasList = res.data.hisData;
				for (var i = 0; i < canvasList.length; i++) {
					this.canvasList.splice(i, 0, canvasList[i]);
					this.canvasType.splice(i, 0, this.canvasTypeName[canvasList[i].name]);
				}
				this.getTIME();
				this.getHistoryData();
			});
		},
		getTIME() {
			let canvasList = this.canvasList[this.canvasIndex];
			this.defaultCategories = [];
			this.categories = [];
			for (var i = 0; i < canvasList.x.length; i++) {
				this.defaultCategories.splice(i, 0, canvasList.x[i]);
				this.categories.splice(i, 0, canvasList.x[i]);
			}
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.dateTimeIndex = e.target.value;
			this.getWeatherMess(this.OBJTime[this.dateTimeIndex]);
		},
		tabChange(index) {
			this.switchTab(index);
		},
		ontabchange(e) {
			let index = e.target.current || e.detail.current;
			this.switchTab(index);
		},
		// tab切换后触发
		switchTab(index) {
			if (index == this.tabIndex) return;
			this.tabIndex = index;
		},
		goto(page) {
			uni.navigateTo({
				url: '../tips/' + page
			});
		},
		// 历史数据
		canvasBarChange(index) {
			this.canvasIndex = index;
			this.getTIME();
			this.getHistoryData();
		},
		// 土壤监测数据
		canvasBarSoilChange(index) {
			console.log(index);
			this.soilIndex = index;
		},
		// 水质监测数据
		canvasBarWaterChange(index) {
			console.log(index);
			this.waterIndex = index;
		},
		// 植被监测数据
		canvasBarVegetationChange(index) {
			console.log(index);
			this.vegetationIndex = index;
		},
		// 动物监测数据
		canvasBarAnimalChange(index) {
			console.log(index);
			this.animalIndex = index;
		},
		// 微生物监测数据
		canvasBarMicrobeChange(index) {
			console.log(index);
			this.microbeIndex = index;
		},
		getInfo() {
			this.$$.request(
				{
					url: this.config.getMonitor,
					method: 'GET',
					data: {}
				},
				true,
				true
			)
				.then(res => {
					console.log(res);
					if (res.code == 2000) {
						this.monitor = res.data;
						let _value = parseInt(res.data[0].value);
						this.getStep(_value);
					}
				})
				.catch(() => {
					console.log('请求失败');
				})
				.finally(() => {
					if (this.isRefresh) {
						uni.stopPullDownRefresh();
						this.isRefresh = !this.isRefresh;
					}

					console.log('complate');
				});
		},

		// 柱状图基本配置
		setColumnOption(canvasId, chartData) {
			return {
				$this: _self,
				canvasId: canvasId,
				type: 'column',
				padding: [10, 10, 10, 0],
				legend: {
					show: false
				},
				fontSize: 8,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				animation: true,
				categories: chartData.categories || {},
				series: chartData.series || {},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					disabled: false,
					disableGrid: true,
					axisLine: true
				},
				yAxis: {
					disabled: false,
					disableGrid: false
				},
				dataLabel: false,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					column: {
						type: 'group',
						width: 20,
						seriesGap: 1,
						categoryGap: 1
					},
					tooltip: {
						showBox: false
					}
				}
			};
		},
		showColumn(canvasId, chartData) {
			console.log('showColumn', canvasId, chartData);
			let opt = this.setColumnOption(canvasId, chartData);
			console.log(canvasId, chartData, opt);
			if (chartData.colors) {opt.colors = chartData.colors};
			console.log(canvasId, chartData, opt);
			canvasObj[canvasId] = new uCharts(opt);
		},
		// 柱状图点击事件
		touchColumn(e, canvasId) {
			let dataIndex = canvasObj[canvasId].getCurrentDataIndex(e);
			let str = '';
			let data;
			canvasObj[canvasId].showToolTip(e, {
				format: function(item, category) {
					data = {
						categories: _self.categories[dataIndex]
					};
					if (typeof item.data === 'object') {
						data.value = item.data.value;
						str = _self.categories[dataIndex] + ' ' + item.name + ':' + item.data.value;
					} else {
						data.value = item.data;
						str = _self.categories[dataIndex] + ' ' + item.name + ':' + item.data;
					}

					_self.changeData(canvasId, data);
					return str;
				}
			});
		},
		changeData(canvasId, data) {
			switch (canvasId) {
				case 'canvasColumnA':
					this.canvasItem = data;
					break;
				case 'canvasColumnB':
					this.soilItem = data;
					break;
				case 'canvasColumnC':
					this.waterItem = data;
					break;
				case 'canvasColumnD':
					this.vegetationItem = data;
					break;
				case 'canvasColumnE':
					this.animalItem = data;
					break;
				case 'canvasColumnF':
					this.microbeItem = data;
					break;
				default:
					break;
			}
		},
		getHistoryData() {
			let chartData = {
				categories: this.defaultCategories,
				series: [
					{
						name: this.canvasList[this.canvasIndex].name,
						data: this.canvasList[this.canvasIndex].data
					}
				]
			};
			this.canvasItem = {
				categories: this.defaultCategories[0],
				value: chartData.series[0].data[0]
			};
			this.showColumn('canvasColumnA', chartData);
		}
	}
};
</script>

<style lang="scss" scoped>
$colors: #a8e160, #fdd64d, #ff9b57, #fe6a6a, #a87383, #455869;
page {
	min-height: 100%;
	display: flex;
	background: #f4f4f4;
	overflow: hidden;
}
.page-content {
	flex: 1;
	flex-direction: column;
	overflow: hidden;
}
// .color1 {
// 	.flex-item {
// 		border-color: #a8e160 !important;
// 	}
// }

// @each $c in $colors {
// 	$i: index($colors, $c);
// 	.color#{$i} {
// 		.flex-item {
// 			border-color: $c !important;
// 		}
// 	}
// }

.nav-tabbar {
	// position: fixed;
	padding: 80upx 0 0;
	width: 750upx;
	height: 100upx;
	background: #f9f9f9;
	box-shadow: 0px 1px 0px 0px #e5e5e5;
	.flex-item {
		position: relative;
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		text-align: center;
		line-height: 100upx;
		&.active {
			color: #00a0e9;
			&::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 4upx;
				background: #00a0e9;
			}
		}
	}
}

.wrap {
	background-color: #fff;
	border-bottom: 20rpx solid #f4f4f4;
	&:nth-last-child(1) {
		border-bottom: 0;
	}
	.wrap-title {
		padding: 50upx 0;
		font-size: 36upx;
		font-weight: 500;
		color: #333;
	}
}
.canvas-wrap {
	padding: 30rpx 0;
	box-sizing: border-box;
}
.top-tips {
	width: 600rpx;
	height: 50rpx;
	margin: 0 auto;
	font-size: 26rpx;
	color: #666;
	// background: #f0f0f0;
	border-radius: 25rpx;

	text:first-child {
		margin-right: 40upx;
	}
	.iconfont {
		color: #00a0e9;
		font-size: 13rpx;
		margin-left: 17rpx;
	}
}

.pollution-wrap {
	padding-bottom: 50upx;
}
.pollution-item {
	width: 50%;
	padding-left: 70upx;
	box-sizing: border-box;
	image {
		margin-right: 20upx;
		width: 30upx;
		height: 30upx;
	}
	.flex-item {
		margin-bottom: 50upx;
		padding-left: 25upx;
		border-left: 6upx solid #a8e160;
	}
	.title {
		margin-bottom: 30upx;
		font-size: 28upx;
		font-weight: bold;
		color: #5e656c;
		line-height: 1;
	}
	.valueWar {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.unit {
			margin-left: 10rpx;
			font-weight: 500;
			color: #7b93a8;
		}
		.value {
			min-width: 124rpx;
			font-size: 40upx;
			font-weight: 500;
			color: #181818;
			line-height: 1;
		}
		&:nth-child(2n) {
			.value {
				min-width: 98rpx;
			}
		}
	}
}
.charts-wrap {
	padding-left: 30upx;
	padding-right: 30upx;
}

.charts-box {
	.charts {
		width: 690upx;
		height: 264upx;
	}
}
.show-charts-tip {
	margin-bottom: 30upx;
	padding: 30upx;
	background: #f4f4f4;
	border-radius: 6upx;
	font-size: 24upx;
	font-weight: 500;
	color: #333;
	.date {
		margin-bottom: 20upx;
		text {
			margin-right: 20upx;
		}
	}
	.content {
		text {
			margin: 0 10upx;
			color: #7b93a8;
		}
		.flex-item:last-child {
			text-align: right;
		}
	}
}

.card-item {
	width: 670rpx;
	height: 140rpx;
	margin: 22upx auto;
	padding: 0 30upx;
	background: linear-gradient(0deg, #f0f6f8, #fff);
	border: 1upx solid #e5e5e5;
	border-radius: 8upx;
	box-sizing: border-box;
	.flex-item {
		display: flex;
		align-items: stretch;
		flex-direction: center;
	}
	.title {
		margin-bottom: 20upx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10upx;
			margin-bottom: -12upx;
		}
	}
	.tips {
		font-size: 20upx;
		font-weight: 500;
		color: #999999;
	}
	.num {
		font-size: 30upx;
		align-items: baseline;
		.count {
			font-size: 60upx;
		}
	}
}
.canvas-box {
	width: 100%;
	height: 500rpx;
}
.canvasBoxWar {
	padding: 0 30rpx;
	box-sizing: border-box;
	.box {
		padding: 34rpx 0;
		box-sizing: border-box;
		border-top: 1rpx solid #e5e5e5;
		min-height: 100rpx;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 52rpx;
		&:nth-last-child(1) {
			padding-bottom: 0;
		}
		.left {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			min-width: calc(8em + 51rpx);
			width: calc(8em + 51rpx);
			color: #7b93a8;
			.image {
				min-width: 30rpx;
				width: 30rpx;
				height: 30rpx;
				margin-right: 21rpx;
			}
		}
		.right {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			color: #333333;
			.itemWar {
				.item {
				}
				.day {
					color: #0ba1f8;
				}
			}
		}
	}
}
</style>
